<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
<link rel="stylesheet" type="text/css" href="/nui/pages/components/placeholder/style/page-min.css?v=81e8891"/>

</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">输入框占位符</h1>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">先睹为快</h2>
			<div class="e-mt15">
				<input type="text" class="ui-input" id="demo" placeholder="请输入...">
			</div>
<script type="text/highlight" data-xml-options>
&lt;input type="text" class="ui-input" id="demo" placeholder="请输入..."&gt;
</script>
<script type="text/highlight" data-javascript-options>
Nui.define(['placeholder'], function(placeholder){
	$('#demo').placeholder({
		color:'#f00',
		animate:true
	})

	//或

	placeholder({
		target:'#demo',
		color:'#f00',
		animate:true
	})
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">选项参数</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> text</h3>
<div class="e-mt15 f-lh22">
    <p>功能：输入框占位提示文本</p>
    <p>类型：{String}</p>
    <p>默认：''</p>
    <p>说明：若元素上含有placeholder属性将会覆盖该值</p>
</div>

<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> animate</h3>
<div class="e-mt15 f-lh22">
    <p>功能：是否以动画形式展示</p>
    <p>类型：{Boolean}</p>
    <p>默认：false</p>
    <p>说明：输入框focus提示文本会缩进并且透明度降低</p>
</div>

<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> equal</h3>
<div class="e-mt15 f-lh22">
    <p>功能：输入框值是否可以和占位符内容相同</p>
    <p>类型：{Boolean}</p>
    <p>默认：true</p>
    <p>说明：设置为false时如果输入值等于占位符值将自动被清空</p>
</div>

<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> restore</h3>
<div class="e-mt15 f-lh22">
    <p>功能：销毁或者重置组件是否还原默认值</p>
    <p>类型：{Boolean}</p>
    <p>默认：true</p>
</div>

<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> color</h3>
<div class="e-mt15 f-lh22">
    <p>功能：占位符文本颜色</p>
    <p>类型：{String}</p>
    <p>默认：'#ccc'</p>
</div>

<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onChange</h3>
<div class="e-mt15 f-lh22">
    <p>功能：调用实例的value方法后执行回调</p>
    <p>类型：{Function}</p>
    <p>默认：null</p>
</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例属性</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> target</h3>
<div class="e-mt15 f-lh22">
    <p>功能：调用组件的对象</p>
    <p>类型：{jQuery Object}</p>
</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> value</h3>
<div class="e-mt15 f-lh22">
    <p>功能：设置输入框值</p>
    <p>类型：{Function}</p>
    <p>参数：val {String}</p>
</div>

			<h2 class="e-pt20 f-fs22 f-bb e-pb10">类方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> value</h3>
<div class="e-mt15 f-lh22">
    <p>功能：设置输入框值</p>
    <p>类型：{Function}</p>
    <p>参数：container {Object} 容器元素（选填）</p>
    <p>参数：id {Number, String} 实例__id或者选项参数id</p>
    <p>说明：将实例还原为初始状态，不传id则对所有实例操作</p>
</div>
		</div>	
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/template.html">模板引擎</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/components/">交互组件</a>
                
                <ul>
                    <li>
                        <a  href="/nui/pages/components/#开发组件">开发组件</a>
                        
                    </li>
                    <li>
                        <a href="/nui/pages/components/router/">路由</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/layer/">弹出层</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/datagrid/">数据网格</a>
                    </li>
                    <li>
                        <a class="s-crt" href="/nui/pages/components/placeholder/">输入框占位符</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/input/">输入框增强</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/popover/">提示框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/search/">搜索</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/select/">选择器</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/calendar/">日历</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/tab/">选项卡</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/paging/">分页</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/carousel/">走马灯</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/upload/">文件上传</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/radio/">单选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/checkbox/">复选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">固钉</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">数字输入</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/print/">打印</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/collapse/">折叠面板</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/validate/">表单校验</a>
                    </li>
                </ul>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=e9a2df8"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
    <script type="text/javascript">
    
Nui.load("./script/page-min")

    </script>
</body>
</html>